<template>
	<view class="content">
		<test :msg="msg" @testShowName="testEvent"></test>
		<test-a></test-a>
		<test-b></test-b>
		{{"Msea"}}
		<view>{{msg}}</view>
		<view>{{msg+"Msea"}}</view>
		<view>{{"Msea".indexOf("sea")!==-1?"最靓的仔":"No"}}</view>
		<view>{{"我爱北京天安门".slice(0,1)}}</view>
		<view>{{false||""||"给你哦"}}</view>
		<image :src="url" mode=""></image>
		<view :class="'box'+1">test</view>
		<view :style="{width:'100px',height:'100px',background:'red'}"></view>
		<view :style="[{width:'100px',height:'100px',background:'green'}]"></view>
		<view :class="{box111:true}"></view>
		<view :class="['box111','box222']"></view>
		<view>
			<view v-for="(item,index) in names" :key="index" :class="{box333:index===currentIndex}" @click="setIndexNum(index)">
				{{item}}
			</view>
		</view>
		<view :class="[{box111:true},'box222']"></view>
		<view>
			<uni-calendar 
			:insert="true"
			:lunar="true" 
			:start-date="'2019-3-2'"
			:end-date="'2019-5-20'"
			@change="change"
			 >
		</uni-calendar>
		</view>
	</view>
</template>

<script>
	import test from '../../components/test.vue'
	import testA from '../../components/a.vue'
	import testB from '../../components/b.vue'
	import uniCalendar from '@/components/uni-calendar/uni-calendar.vue'
	export default {
		data() {
			return {
				msg: 'Hello uniapp',
				url: '../../static/img/logo.png',
				names: ['lili', 'haha', 'xxxi'],
				currentIndex: 0
			}
		},
		components: {
			test,
			"test-a": testA,
			"test-b": testB,
			uniCalendar
		},
		onLoad() {
			// $on 注册事件调用多次
			// uni.$on("testEmit", (rel)=>{
			// 	console.log(rel)
			// })
			// $once 注册事件调用一次
			uni.$once("testEmit", (rel)=>{
				console.log(rel)
			})
		},
		methods: {
			testEvent(rel) {
				console.log(rel)
			},
			setIndexNum(index) {
				this.currentIndex = index
			},
			change(e) {
				console.log(e);
			}
		}
	}
</script>

<style>
	.box111{
		width: 100px;
		height: 100px;
		background: #007AFF;
	}
	.box222{
		border:1px solid #d91610;
	}
	.box333{
		background: #2C405A;
	}
</style>
